<template>
  <div ref="detail" class="detailContainer">
    <detail-banner :bannerImg="bannerImg" :sightName="sightName" :galleryImgs="galleryImgs"></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-content :list="categoryList"></detail-content>
    </div>
  </div>
</template>
<script type='text/babel'>
import DetailBanner from './components/Banner.vue'
import DetailHeader from './components/Header.vue'
import DetailContent from './components/Content.vue'
import axios from 'axios'
export default {
  data () {
    return {
      bannerImg: '',
      sightName: '',
      galleryImgs: [],
      categoryList: [],
      list: [{
        title: '成人票',
        children: [{
          title: '成人票--二级菜单'
        }, {
          title: '成人票--二级菜单'
        }]
      }, {
        title: '学生票',
        children: [{
          title: '学生票--二级菜单'
        }, {
          title: '学生票--二级菜单'
        }]
      }, {
        title: '儿童票',
        children: [{
          title: '儿童票--二级菜单'
        }, {
          title: '儿童票--二级菜单'
        }]
      }]
    }
  },
  created () {},
  mounted () {
    this.getDetailInfo()
  },
  updated () {
    this.$refs.detail.scrollTop = 0
  },
  activated () {},
  deactivated () {},
  methods: {
    getDetailInfo () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.getInfoSuccess)
    },
    getInfoSuccess (res) {
      res = res.data
      if (res.ret && res.data) {
        let data = res.data
        this.bannerImg = data.bannerImg
        this.sightName = data.sightName
        this.categoryList = data.categoryList
        this.galleryImgs = data.gallaryImgs
      }
    }
  },
  computed: {},
  watch: {},
  components: {
    DetailBanner,
    DetailHeader,
    DetailContent
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  .detailContainer {
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .content{
      height:800px;
    }
  }
</style>
